<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	window.onload = function () {
		var aBtn = document.getElementsByTagName('input');
		var oImg = document.getElementById('img1');

		var yImg = new Image();
		var iNow = 0;

		//第一步：预加载图片
		yImg.onload = function () {
			draw(oImg);
		}

		yImg.src = oImg.src;

		//第二步：画板+事件
		function draw(obj){
			var oC = document.createElement('canvas');
			var oGC = oC.getContext('2d');

			oC.width = obj.width;
			oC.height = obj.height;

			obj.parentNode.replaceChild(oC, obj);		//替换掉原有节点

			oGC.drawImage(obj, 0, 0);

			aBtn[1].onclick = function () {
				iNow ++;
				if (iNow == 4) {
					iNow = 0;
				}
				toChange();
			};

			aBtn[0].onclick = function () {
				iNow --;
				if (iNow == -1) {
					iNow = 3;
				};
				toChange();
			};

			function toChange(){
				switch (iNow) {
					case 1:
						oC.width = obj.height;
						oC.height = obj.width;
						oGC.rotate(90*Math.PI/180);
						oGC.drawImage(obj, 0, -obj.height);		//x,y轴对调的原因（重点）
					break;
					case 2:
						oC.width = obj.width;
						oC.height = obj.height;
						oGC.rotate(180*Math.PI/180);
						oGC.drawImage(obj, -obj.width, -obj.height);
					break;
					case 3:
						oC.width = obj.height;
						oC.height = obj.width;
						oGC.rotate(270*Math.PI/180);
						oGC.drawImage(obj, -obj.width, 0);
					break;
					case 0:
						oC.width = obj.width;
						oC.height = obj.height;
						oGC.rotate(0);
						oGC.drawImage(obj, 0, 0);
					break;					
				}
			}
		}
	}
	</script>
</head>
<body>
	<input type="button" value="逆时针旋转" />
	<input type="button" value="顺时针旋转" />
	<div id="div1">
		<img id="img1" src="66.jpg" />
	</div>
</body>
</html>